<template>
    <div>
        <div style="margin: 10px 0">
            <el-select v-model="selectedTrainId" placeholder="请选择车次" style="width: 300px">
                <el-option
                    v-for="train in trains"
                    :key="train.id"
                    :label="`${train.id} -${train.trainNumber}- ${train.startStation} - ${train.endStation} -${train.ticketType}`"
                    :value="train.id">
                </el-option>
            </el-select>
            <el-button class="ml-5" type="primary" @click="load()">搜索</el-button>
        </div>
        <div>
            
            <div v-for="(row, rowIndex) in seatRows" :key="rowIndex" style="display: flex; margin-bottom: 10px;">
                <el-tag
                    v-for="ticket in row"
                    :key="ticket.id"
                    :type="getTicketType(ticket.ticketStatus)"
                    style="margin-right: 10px; flex: 1; text-align: center; cursor: pointer;"
                    @click="handleTicketClick(ticket)">
                    {{ `${ticket.carriageNumber}车${ticket.seatNumber}` }}
                </el-tag>
            </div>
        </div>
        <el-dialog
            title="座位详细"
            :visible.sync="visible"
            width="30%"
            center
            :modal="true"
            :model="order"
        >
            <el-descriptions v-if="orderUser" title="用户信息" size="medium" :column="1">
                <el-descriptions-item label="用户ID">{{orderUser.id}}</el-descriptions-item>
                <el-descriptions-item label="用户名">{{orderUser.username}}</el-descriptions-item>
                <el-descriptions-item label="用户昵称">{{orderUser.nickname}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{orderUser.phone}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions v-if="order && ticket" title="订单信息" size="medium" :column="1">
                <el-descriptions-item label="订单号">{{order.id}}</el-descriptions-item>
                <el-descriptions-item label="门票号">{{order.ticketId}}</el-descriptions-item>
                <el-descriptions-item label="座位号">{{ ticket.carriageNumber ? `${ticket.carriageNumber}车${ticket.seatNumber}` : '' }}</el-descriptions-item>
                <el-descriptions-item label="订单创建时间">{{order.orderTime}}</el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag size="small" :type="getTicketType(ticket.ticketStatus)">{{ ticket.ticketStatus === '退票' ? '退票中' : ticket.ticketStatus }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer" class="dialog-footer">
              <el-button @click="visible = false">取 消</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: "TbTicket",
    data() {
        return {
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 10,
            name: "",
            form: {},
            dialogFormVisible: false,
            visible: false,
            selectedTrainId: null,
            multipleSelection: [],
            trains: [],
            tickets: [],
            seatRows: [],
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            order: {},
            ticket: {},
            orderUser:{},
        }
    },
    created() {
        this.loadTrains()
    },
    methods: {
        loadTrains() {
            this.request.get("/tbTrain/page", {
                params: {
                    pageNum: 1,
                    pageSize: 9999,
                }
            }).then(res => {
                this.trains = res.data.records;
            })
        },
        load() {
            if (!this.selectedTrainId) {
                this.$message.error("请选择车次");
                return;
            }
            this.request.get("/tbTicket/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: 150,
                    name: this.selectedTrainId,
                }
            }).then(res => {
                this.tickets = res.data.records;
                this.formatTickets();
            })
        },
        formatTickets() {
            const rows = [];
            let currentCarriage = null;
            let currentRow = [];
            
            this.tickets.forEach((ticket, index) => {
                if (currentCarriage === null || ticket.carriageNumber !== currentCarriage) {
                    if (currentRow.length) {
                        rows.push(currentRow);
                        currentRow = [];
                    }
                    currentCarriage = ticket.carriageNumber;
                }
                
                currentRow.push(ticket);
                
                if (currentRow.length === 5 || index === this.tickets.length - 1) {
                    rows.push(currentRow);
                    currentRow = [];
                }
            });
            
            this.seatRows = rows;
        },
        getTicketType(status) {
            switch (status) {
                case '售票':
                    return 'success';
                case '改签':
                    return 'warning';
                case '退票':
                    return 'warning';
                case '未售出':
                    return 'info';
                default:
                    return 'info';
            }
        },
        async handleTicketClick(ticket) {
            if(ticket.ticketStatus === '未售出')
                return;
            this.visible = true;
            this.ticket=ticket;
            await this.request.get("/tbOrder/getOrderByTicketId/" + ticket.id).then(res => {
                this.order = res.data;
            });
            this.request.get("/user/" + this.order.userId).then(res => {
                this.orderUser = res.data;
            })
        }
    }
}
</script>

<style>
</style>
